<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta http-equiv="keywords" content="BadApple,Bad Apple,JavaScript">
	<meta http-equiv="description" content="JavaScript,Bad Apple,BadApple">
	<meta lang="zh" />
    <link rel="bookmark" type="image/x-icon" href="images/favicon.ico" /> 
    <link rel="icon" type="image/x-icon" href="images/favicon.ico" />
    <link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" /> 
    <title>Bad Apple</title>
<style type="text/css">
            body {
                margin: 0;
                padding: 0 auto;
                background: #000;
            }
            #stage {
                margin: 16px auto;
                width: 640px;
            }
            header a {
                color: #7f7f7f;
            }
            #progress {
                color: #7fb77f;
            }
            #div_loading {
                width: 86%;
                margin: 0 auto;
                text-align: center;
                height: 480px;
                position: relative;
            }
            #div_loading img {
                overflow: auto;
                margin: auto;
                position: absolute;
                top: 0; 
                left: 0; 
                bottom: 0; 
                right: 0;
                vertical-align: middle;
            }
</style>
	<script src="js/jquery-3.0.0.js" type="text/javascript"></script>
</head>
  <body>
	<header>
	  <a href="/">Home</a>&nbsp;&nbsp;
	  <a href="javascript:void(0);" id="start">点我开始</a>&nbsp;&nbsp;
	  <a href="http://git.oschina.net/MoeWhite19/bad_apple">下载本deemo</a>&nbsp;&nbsp;
	  <a herf="javascript:void(0);" id="ev">执行></a>
	  <span id="progress">0&#37;</span>
	</header>
	<dir id="mydebug" contentEditable="true">12</dir>
	<center>
	  <canvas id="stage">Sorry, Your Browser Does Not Support.</canvas>
	</center>
	<script src="js/bad_apple.js" type="text/javascript"></script>
	
<!--mp开始-->
	<link rel="stylesheet" href="css/mplayer.css">
	<div class="mp" id='mpi'>
	  <div class="mp-box">
		<img src="images/mp/mplayer_error.png" alt="music cover" class="mp-cover">
		<div class="mp-info">
		  <p class="mp-name">名字</p>
		  <p class="mp-singer">歌手</p>
		  <p><span class="mp-time-current">00:00</span>/<span class="mp-time-all">00:00</span></p>
		</div>
		<div class="mp-btn">
		  <button class="mp-prev" title="上一首"></button>
		  <button class="mp-pause" title="播放"></button>
		  <button class="mp-next" title="下一首"></button>
		  <button class="mp-mode" title="播放模式"></button>
		  <div class="mp-vol">
			<button class="mp-vol-img" title="静音"></button>
			<div class="mp-vol-range" data-range_min="0" data-range_max="100" data-cur_min="80">
			  <div class="mp-vol-current"></div>
			  <div class="mp-vol-circle"></div>
			</div>
		  </div>
		</div>
		<div class="mp-pro">
		  <div class="mp-pro-current"></div>
		</div>
		<div class="mp-menu">
		  <button class="mp-list-toggle"></button>
		  <button class="mp-lrc-toggle"></button>
		</div>
	  </div>
	  <button class="mp-toggle">
		<span class="mp-toggle-img"></span>
	  </button>
	  <div class="mp-lrc-box">
		<ul class="mp-lrc"></ul>
	  </div>
	  <button class="mp-lrc-close"></button>
	  <div class="mp-list-box">
		<ul class="mp-list-title"></ul>
		<table class="mp-list-table">
		  <thead>
			<tr>
			  <th>歌名</th>
			  <th>歌手</th>
			  <th>时长</th>
			</tr>
		  </thead>
		  <tbody class="mp-list"></tbody>
		</table>
	  </div>
	</div>
	<script src="js/mp/mplayer.js"></script>
	<script src="js/mp/mplayer-list.js"></script>
	<script src="js/mp/mplayer-functions.js"></script>
	<script src="js/mp/jquery.nstSlider.js"></script>
	<script src="js/mp/debug.js"></script>
	<!--mp结束-->
  </body>
</html>

